@use postcss-nested;
html,
body {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #121314;
}

input {
    display: none;
}

.grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    width: 100vw;
    height: 100vh;
    position: absolute;
}

.grid>* {
    position: relative;
}

label {
    display: block;
    cursor: pointer;
    position: absolute;
    width: 50vw;
    height: 50vw;
    max-width: 150px;
    max-height: 150px;
}

@media (min-aspect-ratio: 1/1) {
    label {
        width: 50vh;
        height: 50vh;
    }
}

.menu--1 label,
.menu--2 label {
    bottom: 0;
}

.menu--3 label,
.menu--4 label {
    top: 0;
}

.menu--1 label,
.menu--3 label {
    right: 0;
}

.menu--2 label,
.menu--4 label {
    left: 0;
}

path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    --length: 0;
    --offset: -50;
    stroke-dasharray: var(--length) var(--total-length);
    stroke-dashoffset: var(--offset);
    transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

circle {
    fill: #fff3;
    opacity: 0;
}

label:hover circle {
    opacity: 1;
}

.cross input:checked+svg {
    .line--1,
    .line--3 {
        --length: 22.627416998;
    }
    .line--2 {
        --length: 0;
    }
}

.back input:checked+svg {
    .line--1,
    .line--3 {
        --length: 8.602325267;
    }
}

.menu--1 {
    background-color: #3f77e9;
    .line--1,
    .line--3 {
        --total-length: 126.64183044433594;
    }
    .line--2 {
        --total-length: 70;
    }
    input:checked+svg {
        .line--1,
        .line--3 {
            --offset: -94.1149185097;
        }
        .line--2 {
            --offset: -50;
        }
    }
}

.menu--2 {
    background-color: #0095f9;
    .line--1,
    .line--3 {
        --total-length: 111.22813415527344;
        --offset: -62.22813415527344;
    }
    .line--2 {
        --total-length: 99;
    }
    input:checked+svg {
        path {
            transform: translateX(30px);
        }
        .line--1,
        .line--3 {
            --offset: -16.9705627485;
        }
        .line--2 {
            --offset: -20;
        }
    }
}

.menu--3 {
    background-color: #00aef6;
    .line--1,
    .line--3 {
        --total-length: 126.38166809082031;
    }
    .line--2 {
        --total-length: 80;
    }
    input:checked+svg {
        .line--1,
        .line--3 {
            --offset: -109.1770175568;
        }
        .line--2 {
            --offset: -38;
            --length: 24;
        }
    }
}

.menu--4 {
    background-color: #18bee5;
    .line--1,
    .line--3 {
        --total-length: 103.35061645507812;
        --offset: -54.35061645507812;
    }
    .line--2 {
        --total-length: 99;
    }
    input:checked+svg {
        path {
            transform: translateX(31px);
        }
        .line--1,
        .line--3 {
            --offset: -8.602325267;
        }
        .line--2 {
            --offset: -7;
            --length: 24;
        }
    }
}

.debug {
    display: none;
}

.line--debug {
    opacity: 0;
    stroke-dasharray: none;
}

@media screen and (min-width: 800px) {
    .debug {
        opacity: 0.8;
        display: block;
        position: absolute;
        z-index: 1;
        font-family: sans-serif;
        transform: rotate(-45deg);
        transform-origin: 0% 100%;
        background: #000;
        color: #fff;
        width: 150px;
        height: 100px;
        line-height: 150px;
        text-align: center;
        user-select: none;
        &:hover {
            opacity: 1;
        }
        &.active {
            background: #fff;
            color: #000;
        }
    }

    .debug.active+.grid path.line--debug {
        opacity: .2;
    }
}

/* dribbble - twitter */
.dribbble {
    position: fixed;
    display: block;
    right: 20px;
    bottom: 20px;
    img {
        display: block;
        height: 28px;
    }
}
.twitter {
    position: fixed;
    display: block;
    right: 64px;
    bottom: 14px;
    svg {
        width: 32px;
        height: 32px;
        path {
            fill: #1da1f2;
            stroke: none;
        }
    }
}
